<!--  -->
<template>
  <div>
    <div class="diqu">
      <div class="diqum"> <p>地区</p></div>
      <ul>
        <li><span :class="{active:area=='全部'}" @click="area='全部' " >全部</span></li>
        <li><span :class="{active:area=='官方版'}" @click="area='官方版' ">官方版</span></li>
        <li><span :class="{active:area=='原声'}" @click="area='原声' ">原声</span></li>
        <li><span :class="{active:area=='现场版'}" @click="area='现场版' ">现场版</span></li>
        <li><span :class="{active:area=='网易出品'}" @click="area='网易出品' ">网易出品</span></li>
      </ul>
    </div>

    <div class="diqu">
      <div class="diqum"> <p>类型</p></div>
      <ul>
        <li><span :class="{active:type=='全部'}" @click="type='全部' " >全部</span></li>
        <li><span :class="{active:type=='内地'}" @click="type='内地' ">内地</span></li>
        <li><span :class="{active:type=='港台'}" @click="type='港台' ">港台</span></li>
        <li><span :class="{active:type=='欧美'}" @click="type='欧美' ">欧美</span></li>
        <li><span :class="{active:type=='日本'}" @click="type='日本' ">日本</span></li>
        <li><span :class="{active:type=='韩国'}" @click="type='韩国' ">韩国</span></li>
      </ul>
    </div>

     <div class="diqu">
      <div class="diqum"> <p>排序</p></div>
      <ul>
        <li><span :class="{active:order=='上升最快'}" @click="order='上升最快' " >上升最快</span></li>
        <li><span :class="{active:order=='最热'}" @click="order='最热' ">最热</span></li>
        <li><span :class="{active:order=='最新'}" @click="order='最新'">最新</span></li>
      </ul>
    </div>

     <div class="zuimver">
           <div class="mvlist"  @mouseenter="enter" @mouseleave="leave"  v-for="(item,index) in mvlist" :key="index">
             <p>{{item.playCount}}</p>
           <img :src="item.cover"/>
           <div v-show="yc" class="mvplayt"></div>
            <span>{{item.artistName}}</span>
           </div>
     </div>

     <div class="fenyeuw">
    <div class="fenyetu">
      <!-- total 总条数
      current-page当前页
      page-size 每页多少条数据 -->

    <el-pagination
    @current-change="handleCurrentChange"
  background
  layout="prev, pager, next"
  :total="total"
  :current-page="page"
   ></el-pagination>
</div>
</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      page:1,
      //总条数
      total:20,
      // 页容量
      limit:10,
      // 地区
      area:"全部",
      // 类型
      type:"全部",
      // 排序
      order:"上升最快",
         yc:false,
         mvlist:[]
    }
  },
  created(){
     this.getlists()
  },
watch:{
   area(){
    //  返回第一页
     this.page=1
 this.getlists()
   },
   type(){
 this.getlists()
   },
   order(){
 this.getlists()
   }
},
  methods:{
      enter(){
        this.yc=true
      },
      leave(){
        this.yc=false
      },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        // 保存页码
        this.page=val
        //重新获取数据
        this.getlists()
        },

      getlists(){
axios({
           url:'https://autumnfish.cn/mv/all',
           method:'get',
           params:{
               area:this.area,
               type:this.type,
              order:this.order ,
              limit:this.limit,
              offset:(this.page-1)*this.limit
           }
    }).then(res=>{
          console.log(res) 
          this.mvlist=res.data.data
          for(let i=0;i<this.mvlist.length;i++){
            if(this.mvlist[i].playCount>10000){
              this.mvlist[i].playCount=parseInt(this.mvlist[i].playCount/10000)+'万'
            }

          }
          if(res.data.count){
         this.total=res.data.count
        }
    })
      }

  }
}

</script>
<style>
  .zuimver{
    height: 600px;
    background: cornflowerblue;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
  }
  .zuimver .mvlist{
    width: 200px;
    height: 150px;
    background: crimson;
    position: relative;
    margin-left:120px;
    margin-top: 30px;
  }
  .zuimver .mvlist p{
    font-size: 20px;
    text-align: end;
  }
    .zuimver .mvlist img{
        width:198px ;
        height: 90px;
    }
    .zuimver .mvlist .mvplayt{
      width: 50px;
      height: 50px;
      background: yellow;
      position: absolute;
      left:75px;
      top:50px ;
    }
    .diqu{
      height: 30px;
      background: chartreuse;
      display: flex;
      align-content: flex-start;
    }
    .diqu .diqum{
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .diqu ul{
      width: 500px;
      height: 30px;
    }
    .diqu ul li{
         float: left;
         line-height: 30px;
         list-style-type: none;
         margin-left: 30px;
    }
    .diqu ul li span.active{
      color: red;
    }
      
   


</style>